<template>
  <div>
    <breadcrumb :navdata="bdname"></breadcrumb>
    <div class="classSearch">
      <el-autocomplete
        placeholder="输入你想查找的信息"
        v-model="mienTitle"
        :fetch-suggestions="querySearch"
        :trigger-on-focus="false"
        @select="handleSelect"
        :select-when-unmatched="true"
      ></el-autocomplete>
      <span class="classSearchBtn" @click="handleSelect({'value':mienTitle})">搜索</span>
    </div>
    <div class="classMienNull" v-show="searchNull">
      <img src="../../images/xiajiazhuangtai.png" width="123px" height="151px">
      <p>{{searchNullText}}</p>
    </div>
    <div class="classMien" v-show="!searchNull">
      <div class="classList">
        <div
          class="class-item"
          v-for="(item,key) in classList"
          :key="key+'classList'"
          @click="toClassDetail(item.id)"
        >
          <div class="class-item-img">
            <img :src="item.filename" alt>
          </div>
          <div class="class-item-title">{{item.title}}</div>
          <div class="class-item--time">{{item.create_at&& filterData(item.create_at)}}</div>
        </div>
      </div>
      <div class="class-pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="Number(totalCol)"
          :pager-count="9"
          @current-change="pageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import breadcrumb from "basic/breadcrumb/breadcrumb"
import { bannerClassFindAll } from 'api/getData'
export default {
  name: 'classMien',
  metaInfo: {
    title: '班级风采-国科学院', // set a title
    meta: [{                 // set meta
      name: 'keywords',
      content: '班级风采-国科学院,在线教育,IT人才培养,IT培训,软件开发培训,编程培训,软件工程师培训班,成都IT培训机构,程序员培训机构'
    }],
  },
  data() {
    return {
      bdname: [
        {
          name: '首页',
          url: '/'
        },
        {
          name: '班级风采',
          url: '/classMien'
        }
      ],
      currentPage: 1,
      pageSize: 12,
      totalCol: 0,
      mienTitle: '',
      classList: [],
      queryClass: [],
      queryRow: '',
      searchNullText: '',
      searchNull: false
    }
  },
  created() {
    bannerClassFindAll('', '1', '12').then(res => {
      if (res.data.totalRow == 0) {
        this.searchNull = true
        this.searchNullText = '哦豁~还没有相关班级风采，请耐心等待~'
        return
      }
      this.classList = res.data.bannerClassList
      this.totalCol = res.data.totalRow
    })
  },
  mounted() {
    document.querySelector('.content').style.backgroundColor = 'rgba(245,245,245,1)';
  },
  beforeRouteLeave(to, from, next) {
    document.querySelector('.content').style.backgroundColor = 'rgba(255,255,255,1)';
    next()
  },
  computed: {

  },
  components: {
    breadcrumb
  },
  methods: {
    pageChange(e) {
      let qstr = '';
      if (this.queryClass.length != 0) {
        qstr = this.mienTitle
      }
      bannerClassFindAll(qstr, e.toString(), '12').then(res => {
        this.classList = res.data.bannerClassList
        this.totalCol = res.data.totalRow
      })
    },
    async querySearch(queryString, cb) {
      let formatResult = []
      //搜索班级风采
      await bannerClassFindAll(queryString, '1', '12').then(res => {
        let resData = res.data.bannerClassList ? res.data.bannerClassList : []
        for (let i = 0; i < resData.length; i++) {
          let item = {}
          item.value = resData[i].title
          item.id = resData[i].id
          formatResult.push(item)
        }
        this.queryRow = res.data.totalRow
        this.queryClass = resData
      })
      // 调用 callback 返回建议列表的数据
      if (cb) {
        cb(formatResult)
      }

    },
    handleSelect(val) {
      // console.log(val.value==='')
      this.currentPage = 1
      if (val.value === '') {
        bannerClassFindAll('', '1', '12').then(res => {
          if (res.data.totalRow == 0) {
            this.searchNull = true
            this.searchNullText = '哦豁~还没有相关班级风采，请耐心等待~'
            return
          }
          this.classList = res.data.bannerClassList
          this.totalCol = res.data.totalRow
          this.searchNull = false
        })
        return
      }
      if (this.queryClass.length != 0 && val.value) {
        this.classList = this.queryClass
        this.totalCol = this.queryRow
        this.searchNull = false
      } else {
        this.searchNull = true
        this.searchNullText = '暂无您搜索的班级的内容'
        //搜索结果空或无输入
      }
    },
    toClassDetail(id) {
      this.$router.push({
        path: '/classMienDetail',
        query: {
          id: id
        }
      })
    },
    filterData(data) {
      let time = ''
      time = this.$moment(data).format('YYYY-MM-DD')
      return time
    }
  }
}

</script>
<style lang="stylus" scoped>
@import '~style/base.styl';

.classMienNull {
  width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  margin-top: 138px;
  padding-bottom: 157px;
  text-align: center;

  p {
    margin-top: 25px;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(164, 164, 164, 1);
  }
}

.classMien {
  width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  padding-bottom: 120px;
}

.classSearch {
  width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  margin-top: 23px;
  margin-bottom: 20px;
  font-size: 0;
}

.classSearchBtn {
  display: inline-block;
  cursor: pointer;
  vertical-align: top;
  height: 44px;
  line-height: 44px;
  background: rgba(255, 98, 82, 1);
  border-radius: 0px 2px 2px 0px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  padding: 0 26px;
}

.classList {
  min-height: 322px;
  font-size: 0;
  margin-bottom: 50px;
}

.class-item {
  display: inline-block;
  width: 285px;
  height: 312px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  margin: 0 20px 20px 0;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;

  &:hover {
    box-shadow: 0px 26px 40px 0px rgba(0, 0, 0, 0.2);
  }
}

.class-item:nth-child(4n) {
  margin-right: 0 !important;
}

.class-item-img {
  width: 285px;
  height: 184px;
  border-radius: 4px;
  margin-bottom: 20px;

  img {
    width: 100%;
    height: 100%;
  }
}

.class-item-title {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14px;
  font-family: MicrosoftYaHei-Bold;
  font-weight: bold;
  color: rgba(32, 32, 32, 1);
  line-height: 29px;
  height: 52px;
  ellipsis(2);
  overflow: hidden;
}

.class-item--time {
  padding-left: 20px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(164, 164, 164, 1);
  position: absolute;
  bottom: 20px;
}
</style>
